<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>主题列表</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weui.css" />
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weuix.css" />
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.min.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.weui.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/swipe.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/macy.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/php.js"></script>
    <script src="/lobstersdk/lobster.js"></script>
    <script src="/jslib/template-web.js"></script>
    <script src="../js/reachbottom.js"></script>
    <style>
        .topicimg {
            height: 20px;
            width: 20px;
        }
    </style>
</head>

<body ontouchstart>
    <div class="weui-tab" id="t1" style="height:auto;">
        <div class="weui-navbar">
            <div class="weui-navbar__item">推荐</div>
            <div class="weui-navbar__item">运动</div>
            <div class="weui-navbar__item">饮食</div>
        </div>
        <div class="weui-tab__panel">
            <div id="s0" class="weui-tab__content">
                <div class="weui-loadmore" id="more0">
                    <i class="weui-loading"></i>
                    <span class="weui-loadmore__tips">正在加载</span>
                </div>
            </div>
            <div id="s1" class="weui-tab__content">
                <div class="weui-loadmore" id="more1">
                    <i class="weui-loading"></i>
                    <span class="weui-loadmore__tips">正在加载</span>
                </div>
            </div>
            <div id="s2" class="weui-tab__content">
                <div class="weui-loadmore" id="more2">
                    <i class="weui-loading"></i>
                    <span class="weui-loadmore__tips">正在加载</span>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script type="text/html" id="topiclisttemp">
    {{each list item }}
    <div class="weui-media-box weui-media-box_appmsg" data-item="{{item}}">
        <div class="weui-media-box__bd">
            <h4 class="weui-media-box__title"><img style="margin-right:.8em;" class="topicimg"
                    src="../images/topic.png" />#{{item.TopicName}}</h4>
            {{if((item.dynamic.Content ||"")!="")}}
            <p class="weui-media-box__desc">{{item.dynamic.Content}}</p>
            <p style="margin-top:6px;" class="weui-media-box__desc">@{{item.dynamic.NickName}} ·
                {{(item.dynamic.CreateTime||"").substring(0,19)}}</p>
            {{/if}}
        </div>
        {{if(item.Attachlist.length>0)}}
        <div class="weui-media-box__hd" style="margin-left:.8em;margin-right:0;">
            <img class="weui-media-box__thumb" src="{{item.Attachlist[0]}}" alt="">
        </div>
        {{/if}}
    </div>
    {{/each}}
</script>
<script>

    lobsterh5.main({
        data: {
            pagelist: [{
                page: 1,
                limit: 10,
                hasmore: true,
                isloading: false,
            }, {
                page: 1,
                limit: 10,
                hasmore: true,
                isloading: false,
            }, {
                page: 1,
                limit: 10,
                hasmore: true,
                isloading: false,
            }],
            tabindex: 0,
            from: '',
        },
        //初始化页面
        pageload: function () {
            var self = this;
            self.data.from = lobsterh5.GetUrlParam("from") || "";
            this.initevent();

        },
        //初始化事件
        initevent: function () {
            var self = this;
            $('#t1').tab({
                defaultIndex: self.data.tabindex,
                activeClass: 'tab-green',
                onToggle: function (index, sss) {
                    self.data.tabindex = index;
                    if (!self.data.pagelist[index].isloading)
                        self.getTopicList();
                }
            })
            $(window).lobsterreachbottom({
                onSuccess: function () {
                    self.getTopicList();
                }
            });
            $("#t1").on("click", ".weui-media-box_appmsg", function () {
                var item = $(this).data("item");
                if (self.data.from == "publish") {
                    lobsterh5.SetPageStorage("selecttopic", JSON.stringify(item));
                    history.back()
                } else {
                    location.href = "topicdetail.html?topicId=" + item.TopicId;
                }
            })
        },
        getTopicList() {
            var self = this;
            var tabindex = self.data.tabindex;
            if (!self.data.pagelist[tabindex].hasmore) return;
            $("#more" + tabindex).show();
            lobsterh5.GET("/lowcode/APP20211203093514696/name/?fun=Dynamic.GetTopicList", {
                searchkey: "",
                topictype: self.data.tabindex + 1,
                page: self.data.pagelist[tabindex].pageIndex,
                limit: self.data.pagelist[tabindex].pageSize
            }).then(res => {
                res.forEach(a => {
                    a.LookersCount = self.convertcount(a.LookersCount);
                    if (a.dynamic)
                        a.Attachlist = (a.dynamic.Attachs || "").split(',').filter(b => {
                            return (b || "") != "";
                        });
                })
                var html = template("topiclisttemp", { list: res, from: self.data.from });
                $("#more" + tabindex).before(html);
                if (res.length < self.data.pagelist[tabindex].limit) {
                    self.data.pagelist[tabindex].hasmore = false;
                    $("#more" + tabindex).text("没有更多了");
                } else {
                    $("#more" + tabindex).hide();
                    self.data.pagelist[tabindex].page++;
                }
                self.data.pagelist[tabindex].isloading = true;
            }).catch(res => {
                console.log(res.msg || res);
                $.toast(res.msg || res, 'forbidden');
            })
        },
        convertcount(count) {
            var count = count || 0;
            if (count >= 10000) {
                count = (count / 10000).toFixed(1) + 'w';
            }
            return count;
        }
    }); 
</script>